<template>
    <h2 style="text-align: center;">房号列表</h2>
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>房号编号</th>
                <th>房号名称</th>
                <th>房号状态</th>
                <th>房型名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <td>{{ item.RoomNum_Id }}</td>
                <td>{{ item.RoomNum_Name }}</td>
                <td>{{ item.RoomNum_State?"上架":"下架" }}</td>
                <td>{{ item.RoomType_Name }}</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';


    //显示响应式数据
    const Info=ref([{
        RoomNum_Id: 0,
        RoomNum_Name: "",
        RoomNum_State: true,
        RoomType_Id: -1,
        RoomType_Name: ""
    }])

    onMounted(()=>{
        ShowRoomNum();//显示
    })
    //显示
    const ShowRoomNum=()=>{
        axios.get("https://localhost:44386/api/RoomNum/ShowRoomNum")
        .then(res=>{
            Info.value=res.data
        })
    }
</script>